<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>WebSocket DEMO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }
    </style>
  </head>
  <body>
 
    <ul id="outCnt"></ul>
	<input type="text" id="message" > </input>
	<button type="button" onclick="sendMessage()">Send message !</button>
    <script>
      let wsc;
      var echo = function(text) {
        var echoone = function(text) {
          var dom = document.createElement("li");
          var t = document.createTextNode(text);
          dom.appendChild(t);
          var cnt = document.getElementById("outCnt");
          cnt.appendChild(dom);
        };
        if (Array.isArray(text)) {
          text.map(function(t) {
            echoone(t);
          });
        } else {
          echoone(text);
        }
      };
      (function() {
        if ("WebSocket" in window) {
          // init the websocket client
          wsc = new WebSocket("ws://192.168.31.11:9009/Chat");
          wsc.onopen = function() {
            echo("connected");
          };
          wsc.onclose = function() {
            echo("closed");
          };
          wsc.onmessage = function(e) {
           // var data = JSON.parse(e.data);
            echo(e.data);
            console.log(e.data);
          };        
        }
      })();
	  
	  function showMessage(text)
	  {
	       var dom = document.createElement("li");
          var t = document.createTextNode(text);
          dom.appendChild(t);
          var cnt = document.getElementById("outCnt");
          cnt.appendChild(dom);
	  }
	  function sendMessage()
      {
       var message=document.getElementById("message").value;
	   showMessage("向服务端发送数据 "+message);
	   //发送文本
      wsc.send(message);
      }
    </script>
  </body>
</html>